<!-- 缴费记录 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
      <el-form-item label="用餐人" prop="diner">
        <el-input v-model="queryParams.diner" placeholder="请输入用餐人姓名" clearable size="small"
          @keyup.enter.native="handleQuery" maxlength="10" show-word-limit />
      </el-form-item>
      <el-form-item label="收款单位" prop="payee">
        <el-input v-model="queryParams.payee" placeholder="请输入收款单位" clearable size="small"
          @keyup.enter.native="handleQuery" maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="用餐时间" >
        <el-date-picker v-model="dateRange" size="small" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="handleQuery" />
      </el-form-item>
      <el-form-item label="付款时间">
        <el-date-picker v-model="payDateRange" size="small" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="handleQuery" />
      </el-form-item>
      <el-form-item label="付款状态" prop="payStatus">
        <el-select v-model="queryParams.payStatus" placeholder="请选择付款状态" clearable size="small" @change="handleQuery">
          <el-option v-for="dict in payStatusOptions" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" style="margin-bottom: 20px;">
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['yongcanjiaofei:jiaofeijilu:export']">导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="recordList">
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="用餐人" align="left" prop="diner" show-overflow-tooltip />
      <el-table-column label="手机号码" align="left" prop="phone" show-overflow-tooltip />
      <el-table-column label="交款部门" align="left" prop="unitName" show-overflow-tooltip />
      <el-table-column label="收款单位" align="left" prop="payee" show-overflow-tooltip />
      <el-table-column label="收款部门" align="left" prop="canteenName" show-overflow-tooltip />
      <el-table-column label="用餐时间" align="center" prop="eatTime" width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.diningStartTime }} 至 {{ scope.row.diningEndTime }}
        </template>
      </el-table-column>
      <el-table-column label="付款金额" align="center" prop="payAmount">
        <template slot-scope="scope">
          ¥{{ scope.row.totalAmount }}元
        </template>
      </el-table-column>
      <el-table-column label="付款时间" align="center" prop="payTime" width="160" />
      <el-table-column label="付款状态" align="center" prop="payStatus" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.payStatus === '1' ? 'success' : scope.row.payStatus === '2' ? 'info' : 'warning'">
            {{ payStatusFormat(scope.row) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 查看详情抽屉 -->
    <details-drawer ref="detailsDrawer" @refresh="getList" />
  </div>
</template>

<script>
import { listPayRecord, exportJiaofeijilu } from "@/api/yongcanjiaofei/jiaofeijilu";
import detailsDrawer from "./detailsDrawer";

export default {
  name: "",
  components: {
    detailsDrawer
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 缴费记录表格数据
      recordList: [],
      // 用餐时间范围
      dateRange: [],
      // 付款时间范围
      payDateRange: [],
      // 付款状态选项
      payStatusOptions: [
        {
          value: "0",
          label: "待支付"
        },
        {
          value: "1",
          label: "已支付"
        },
        {
          value: "2",
          label: "已取消"
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        diner: undefined,
        payee: undefined,
        phone: undefined,
        collectionUnit: undefined,
        payStatus: undefined,
        diningStartTime: undefined,
        diningEndTime: undefined,
        payStartTime: undefined,
        payEndTime: undefined
      }
    };
  },
  created() {
    this.getList();
    // 添加时间格式化方法
    Date.prototype.format = function(fmt) {
      var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
      }
      return fmt;
    };
  },
  methods: {
    /** 查询缴费记录列表 */
    getList() {
      this.loading = true;
      // 处理用餐时间范围
      if (this.dateRange && this.dateRange.length === 2) {
        this.queryParams.diningStartTime = this.dateRange[0];
        this.queryParams.diningEndTime = this.dateRange[1];
      } else {
        this.queryParams.diningStartTime = undefined;
        this.queryParams.diningEndTime = undefined;
      }
      // 处理付款时间范围
      if (this.payDateRange && this.payDateRange.length === 2) {
        this.queryParams.payStartTime = this.payDateRange[0];
        this.queryParams.payEndTime = this.payDateRange[1];
      } else {
        this.queryParams.payStartTime = undefined;
        this.queryParams.payEndTime = undefined;
      }
      listPayRecord(this.queryParams).then(response => {
        this.recordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 付款状态字典翻译
    payStatusFormat(row) {
      const found = this.payStatusOptions.find(item => item.value === row.payStatus);
      return found ? found.label : '';
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.payDateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.$refs.detailsDrawer.show(row);
    },
    /** 导出按钮操作 */
    handleExport() {
      // 创建一个新的查询参数对象，避免影响当前列表的查询
      const exportParams = {
        ...this.queryParams,
        pageSize: 9999  // 导出时设置较大的分页数
      };
      
      // 处理用餐时间范围
      if (this.dateRange && this.dateRange.length === 2) {
        exportParams.diningStartTime = this.dateRange[0];
        exportParams.diningEndTime = this.dateRange[1];
      }
      
      // 处理付款时间范围
      if (this.payDateRange && this.payDateRange.length === 2) {
        exportParams.payStartTime = this.payDateRange[0];
        exportParams.payEndTime = this.payDateRange[1];
      }

      this.$confirm('是否确认导出缴费记录数据?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return exportJiaofeijilu(exportParams);
      }).then(response => {
        // 生成时间戳
        const timestamp = new Date().format("yyyyMMddhhmmss");
        const fileName = `缴费记录${timestamp}.xlsx`;
        this.download(response.msg, fileName);
      }).catch(() => {});
    }
  }
};
</script>
